<template>
    <div>
        <card>
            <!--查询条件-->
            <Row>
                <Form :model="filters" ref="filters" label-position="right" :label-width="90" inline>
                    <FormItem label="小区">
                        <div class="filters-input">
                            <el-select v-model="filters.housingId" @change="housechange" placeholder="请选择小区" filterable no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :value="item.id" :key="item.id" :label="item.name"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                </Form>
            </Row>
            <!--功能按钮-->
            <Row>
                <Button type="primary" icon="md-add" @click="openAdd" style="margin-right: 10px;">新增</Button>
                <Tooltip content="请先下载模板">
                    <Button type="warning" icon="ios-undo" @click="openImportBill()" style="margin:5px 5px">
                        导入设备台账
                    </Button>
                </Tooltip>
                <Button type="info" icon="md-download" @click="download()" style="margin:5px 5px">下载模板</Button>
                <Button type="info" icon="md-download" @click="downloadQrcodes()" style="margin:5px 5px">打包二维码</Button>
            </Row>
            <!--数据展示-->
            <el-table stripe border v-loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="deviceCode" label="设备编号" width="160px"></el-table-column>
                <el-table-column prop="deviceName" label="设备名称"></el-table-column>
                <el-table-column prop="specificationType" label="规格型号"></el-table-column>
                <el-table-column prop="deviceLocation" label="设备位置"></el-table-column>
                <el-table-column prop="installationLocation" label="安装地点"></el-table-column>
                <el-table-column prop="equipmentType" label="设备类型"></el-table-column>
                <el-table-column prop="equipmentPersonName" label="设备负责人"></el-table-column>
                <el-table-column prop="equipmentPersonPhone" label="负责人联系方式"></el-table-column>
                <el-table-column prop="manufacturer" label="生产厂家"></el-table-column>
                <el-table-column prop="supplier" label="供应商"></el-table-column>
                <el-table-column prop="buyingTime" label="购买时间" :formatter="buyingTimeFormat"></el-table-column>
                <el-table-column prop="enableTime" label="启用时间" :formatter="enableTimeFormat"></el-table-column>
                <el-table-column label="操作" align="center" width="250px">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="downloadQrcode(scope.row)">二维码</el-button>
                        <el-button size="mini" type="primary" @click="openModify(scope.row)">修改</el-button>
                        <el-button size="mini" type="danger" @click="openDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
            <!--新增页面-->
            <Modal v-model="addVisible" title="新增">
                <Form :model="adds" ref="adds" label-position="right" :label-width="90" inline>
                    <FormItem label="小区">
                        <div>
                            <el-select v-model="adds.housingId" @change="addHouseChange" placeholder="请选择小区" filterable no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :value="item.id" :key="item.id" :label="item.name"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="设备名称">
                        <Input type="text" v-model="adds.deviceName" placeholder="请输入设备名称" class="normal-input" clearable></Input>
                    </FormItem>
                    <FormItem label="规格型号">
                        <Input type="text" v-model="adds.specificationType" placeholder="请输入规格型号" class="normal-input" clearable></Input>
                    </FormItem>
                    <FormItem label="设备位置">
                        <Input type="text" v-model="adds.deviceLocation" placeholder="请输入设备位置" class="normal-input" clearable></Input>
                    </FormItem>
                    <FormItem label="安装地点">
                        <Input type="text" v-model="adds.installationLocation" placeholder="请输入安装地点" class="normal-input" clearable></Input>
                    </FormItem>
                    <FormItem label="设备类型">
                        <el-select v-model="adds.equipmentType" @change="equipmentTypeChange" clearable placeholder="请选择">
                            <el-option
                                v-for="item in deviceTypeList" :key="item.id"
                                :label="item.name" :value="item.name">
                            </el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="设备负责人">
                        <el-select v-model="adds.equipmentPersonId" @change="putResponsiblePersonId" clearable placeholder="请选择">
                            <el-option
                                v-for="item in responsibleList" :key="item.id"
                                :value="item.responsiblePersonId" :label="item.responsibleArea+'/'+item.responsiblePersonName">
                            </el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="联系方式">
                        <Input type="text" v-model="adds.equipmentPersonPhone" placeholder="请输入负责人联系方式" class="normal-input" clearable></Input>
                    </FormItem>
                    <FormItem label="生产厂家">
                        <Input type="text" v-model="adds.manufacturer" placeholder="请输入生产厂家" class="normal-input" clearable></Input>
                    </FormItem>
                    <FormItem label="供应商">
                        <Input type="text" v-model="adds.supplier" placeholder="请输入供应商" class="normal-input" clearable></Input>
                    </FormItem>
                    <FormItem label="购买时间">
                        <DatePicker v-model="adds.buyingTime" type="date" placeholder="yyyy-MM-dd" style="width: 100%"></DatePicker>
                    </FormItem>
                    <FormItem label="启用时间">
                        <DatePicker v-model="adds.enableTime" type="date" placeholder="yyyy-MM-dd" style="width: 100%"></DatePicker>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="text" size="large" @click="onCancel">取消</Button>
                    <Button type="primary" size="large" @click="handleSubmit">确定</Button>
                </div>
            </Modal>
            <!--编辑页面-->
            <Modal v-model="modifyVisible" title="修改">
                <Form :model="adds" ref="adds" label-position="right" :label-width="90" inline>
                    <FormItem label="小区">
                        <div>
                            <el-select v-model="modifys.housingId" disabled placeholder="请选择小区" filterable no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :value="item.id" :key="item.id" :label="item.name"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="设备名称">
                        <Input type="text" v-model="modifys.deviceName" placeholder="请输入设备名称" class="normal-input" clearable></Input>
                    </FormItem>
                    <FormItem label="规格型号">
                        <Input type="text" v-model="modifys.specificationType" placeholder="请输入规格型号" class="normal-input" clearable></Input>
                    </FormItem>
                    <FormItem label="设备位置">
                        <Input type="text" v-model="modifys.deviceLocation" placeholder="请输入设备位置" class="normal-input" clearable></Input>
                    </FormItem>
                    <FormItem label="安装地点">
                        <Input type="text" v-model="modifys.installationLocation" placeholder="请输入安装地点" class="normal-input" clearable></Input>
                    </FormItem>
                    <FormItem label="设备类型">
                        <el-select v-model="modifys.equipmentType" @change="equipmentTypeChange" clearable placeholder="请选择">
                            <el-option
                                v-for="item in deviceTypeList" :key="item.id"
                                :label="item.name" :value="item.name">
                            </el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="设备负责人">
                        <el-select v-model="modifys.equipmentPersonId" @change="putResponsiblePersonId" clearable placeholder="请选择">
                            <el-option
                                v-for="item in responsibleList" :key="item.id"
                                :value="item.responsiblePersonId" :label="item.responsibleArea+'/'+item.responsiblePersonName">
                            </el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="联系方式">
                        <Input type="text" v-model="modifys.equipmentPersonPhone" placeholder="请输入负责人联系方式" class="normal-input" clearable></Input>
                    </FormItem>
                    <FormItem label="生产厂家">
                        <Input type="text" v-model="modifys.manufacturer" placeholder="请输入生产厂家" class="normal-input" clearable></Input>
                    </FormItem>
                    <FormItem label="供应商">
                        <Input type="text" v-model="modifys.supplier" placeholder="请输入供应商" class="normal-input" clearable></Input>
                    </FormItem>
                    <FormItem label="购买时间">
                        <DatePicker v-model="modifys.buyingTime" type="date" placeholder="yyyy-MM-dd" style="width: 100%"></DatePicker>
                    </FormItem>
                    <FormItem label="启用时间">
                        <DatePicker v-model="modifys.enableTime" type="date" placeholder="yyyy-MM-dd" style="width: 100%"></DatePicker>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="text" size="large" @click="onCancel">取消</Button>
                    <Button type="primary" size="large" @click="saveModify">确定</Button>
                </div>
            </Modal>
            <!--导入-->
            <Modal v-model="importVisible" title="导入设备台账" class="modal-content" :mask-closable="false">
                <Form :model="filemodal" :rules="rule" ref="fileform" label-position="right" :label-width="100">
                    <FormItem label="小区" prop="housingId">
                        <el-select v-model="filemodal.housingId" filterable placeholder="请选择小区" no-data-text="暂无数据" style="width: 100%">
                            <el-option v-for="item in houseList" :value="item.id"
                                       :key="item.id" :label="item.name"></el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="上传文件">
                        <el-upload class="upload-demo" :data="dataFile" ref="upload" :action="act"
                                   :on-preview="handlePreview" :on-remove="handleRemove"
                                   :auto-upload="false" accept=".xlsx,.xls" :headers="{'x-access-token':token}"
                                   :on-success="filesuccess" :on-error="filefail" :limit="1" :multiple="false">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传.xlsx/.xls文件</div>
                        </el-upload>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="text" @click="onCancel">取消</Button>
                    <Button type="primary" @click="submitUpload" :loading="importLoading">确定</Button>
                </div>
            </Modal>
        </card>
    </div>
</template>

<script>
    import moment from "moment";
    import baseURL from "_conf/url";
    import Cookies from "js-cookie";
    import {TOKEN_KEY} from "@/libs/util";

    export default {
        name: "ledger",
        data(){
            return {
                pageNum: 1,
                pageSize: 10,
                pageTotal: 0,
                act:baseURL+"/api/device/importLeger",
                token: Cookies.get(TOKEN_KEY),
                rule:{
                    housingId: [
                        {
                            required: true,
                            message: "请选择小区"
                        }
                    ],
                },

                houseList:[],
                tableData:[],
                deviceTypeList:[],
                responsibleList:[],

                filters:{},
                adds:{},
                modifys:{},
                filemodal: {},
                dataFile: {},

                addVisible: false,
                modifyVisible:false,
                importVisible:false,
                importLoading:false,
                tableLoading:false
            }
        },

        created:function(){
            this.gethouse();
            this.getDeviceType();
        },

        methods:{
            //获取小区
            gethouse: function () {
                this.postRequest("/api/housing/getHousingByLogin").then(res => {
                    this.houseList = res;
                    this.filters.housingId = res[0].id;
                    this.adds.housingId=res[0].id;
                    this.housechange();
                });
            },
            //获取设备类型
            getDeviceType:function(){
                this.getRequest("/api/parameter/loadData?type=1").then(res=>{
                    this.deviceTypeList=res.data;
                });
            },
            //小区选择
            housechange:function () {
                this.loadData();
            },
            //加载数据
            loadData: function(){
                this.tableLoading=true;
                this.filters.pageNum=this.pageNum;
                this.filters.pageSize=this.pageSize;
                this.postRequest("/api/device/ledgerLoadingData",this.filters).then(res=>{
                    if (res.code==20000) {
                        this.tableData=res.data.list;
                        this.pageTotal=res.data.total;
                        this.tableLoading=false;
                    }
                });
            },
            //打开新增页面
            openAdd:function () {
                this.addHouseChange();
                this.addVisible=true;
            },
            //新增/切换小区
            addHouseChange:function(){
                this.getResponsible();
            },
            //设备类型切换
            equipmentTypeChange:function(value){
                this.adds.responsibleDeviceType=value;
                this.getResponsible();
            },
            //获取负责人
            getResponsible:function(){
                this.postRequest("/api/responsible/loadData",this.adds).then(res=>{
                    this.responsibleList=res.data;
                });
            },
            //选择负责人时自动赋值联系方式
            putResponsiblePersonId:function(value){
                let name="";
                let phone="";
                this.responsibleList.forEach(function (res) {
                    if (res.responsiblePersonId==value) {
                        name=res.responsiblePersonName;
                        phone=res.responsiblePersonPhone;
                    }
                })
                this.adds.equipmentPersonName=name;
                this.adds.equipmentPersonPhone=phone;
                this.modifys.equipmentPersonName=name;
                this.modifys.equipmentPersonPhone=phone;
            },
            //新增确认
            handleSubmit:function(){
                this.adds.buyingTime=moment(this.adds.buyingTime).format("YYYY-MM-DD");
                this.adds.enableTime=moment(this.adds.enableTime).format("YYYY-MM-DD");
                this.postRequest("/api/device/addLeger",this.adds).then(res=>{
                    if (res.code==20000){
                        this.$message.success("新增成功");
                        this.addVisible=false;
                        this.loadData();
                    }
                });
            },
            //下载设备二维码
            downloadQrcode:function(row){
                location.href = baseURL + '/api/device/download/qrcode?deviceCode=' + row.deviceCode;
            },
            //当前小区所有设备二维码
            downloadQrcodes:function(){
                location.href = baseURL + '/api/device/download/qrcodes?housingId=' + this.adds.housingId;
            },
            //打开编辑
            openModify:function(row){
              this.getRequest("/api/device/modifyLeger?id="+row.id).then(res=>{
                  if (res.code==20000){
                      this.modifys=res.data;
                      this.adds.housingId=this.modifys.housingId;
                      this.getResponsible();
                  }
              });
              this.modifyVisible=true;
            },
            saveModify:function(){
                this.modifys.buyingTime=moment(this.modifys.buyingTime).format("YYYY-MM-DD");
                this.modifys.enableTime=moment(this.modifys.enableTime).format("YYYY-MM-DD");
                this.postRequest("/api/device/saveModify",this.modifys).then(res=>{
                    if (res.code==20000){
                        this.$Message.success("修改成功");
                        this.loadData();
                        this.adds={};
                        this.modifyVisible=false;
                    }
                });
            },
            //弹出删除提示
            openDelete:function(row){
                this.$Modal.confirm({
                    title: "提示",
                    content: "确定删除该条记录？",
                    onOk: () => {
                        this.getRequest("/api/device/removeLeger?id=" +row.id).then(res => {
                            if (res.code == 20000) {
                                this.$Message.success("删除成功!");
                                this.loadData();
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    },
                    onCancel: () => {

                    }
                });
            },
            //打开导入页面
            openImportBill:function(){
                this.importVisible=true;
            },
            //确认导入
            submitUpload:function(){
                this.$refs["fileform"].validate(valid => {
                    if (valid) {
                        if (this.file == null) {
                            this.$Message.error("请点击需要上传文件");
                        } else {
                            this.dataFile.housingId = this.filemodal.housingId;
                            this.$refs.upload.submit();
                            this.importVisible = false;
                        }
                    }
                });
            },
            handlePreview(file) {
                this.file = file;
            },
            handleRemove(file, fileList) {

            },
            filesuccess(response, file) {
                if (response.code == 20000) {
                    this.$Message.success("导入成功");
                    this.loadData();
                } else {
                    this.$Message.error(response.message);
                }
                this.$refs.upload.clearFiles();
            },
            filefail(response) {
                this.$Modal.error({
                    title: "上传失败",
                    content: "请稍后再试"
                });
                this.$refs.upload.clearFiles();
            },
            //下载
            download:function(){
                let url = "https://syl-estate-img.oss-cn-shenzhen.aliyuncs.com/template/%E8%AE%BE%E5%A4%87%E4%BF%A1%E6%81%AF%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx";
                window.location.href = url;
            },
            onCancel:function () {
                this.addVisible=false;
                this.importVisible=false;
                this.modifyVisible=false;
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            buyingTimeFormat: function (row,column) {
                return moment(row.buyingTime).format("YYYY-MM-DD");

            },
            enableTimeFormat:function (row,column) {
                return moment(row.enableTime).format("YYYY-MM-DD");
            }
        }
    };
</script>
